<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待办事项</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            text-align: center;
            font-family: '微软雅黑';
            background: #DFFFDF;
        }
        div{
            text-align: center;
        }
        h1{
            margin: 30px 0;
            color: #3c3c3c;
        }
        input{
            padding-left: 10px;
            line-height: 36px;
            width: 650px;
            font-size: 18px;
            outline: none;
            /*border-top-left-radius: 20px;*/
            /*border-bottom-left-radius: 20px;*/
            margin-right: 50px;
        }
        input:hover{
            border-color: #ff6700;
        }
        button:hover{
            cursor: pointer;
        }
        #add:hover{
            color: whitesmoke;
            background: #7b7b7b;
        }
        #add{
            line-height: 40px;
            position: absolute;
            right: 333px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            width: 50px;
            outline: none;
            font-size: 16px;
            color: #8e8e8e;
            border: none;
        }
        div{
            position: relative;
        }
        ul{
            text-align: center;
            padding: 0 380px;
        }
        ul li{
            line-height: 40px;
            background: #b8b8dc;
            overflow: hidden;
            border-radius: 6px;
            margin-top: 2px;
            list-style: none;
        }
        ul li span{
            float: left;
            margin-left: 10px;
        }
        ul li button{
            float: right;
            font-size: 28px;
            color: chartreuse;
            border: 0px;
            width: 40px;
        }
    </style>
</head>
<body>
    <h1>今天待办事项</h1>
    <div>
        <button id="add">添加</button>
        <input type="text" id="ipt" placeholder="添加待办任务">
    </div>
    <ul id="list">
    </ul>


    <script>
        //待办事项
        var add =document.querySelector("#add")
        add.addEventListener('click',function () {
            //获取input的内容
            var ipt = document.querySelector("#ipt")
            console.log (ipt.value)
            //创建 li 标签
            var li =document.createElement('li')
            //创建span 标签
            var span = document.createElement('span')
            var span_text = document.createTextNode(ipt.value)
            span.setAttribute("contenteditable","true");
            span.style.outline = "none";
            span.appendChild(span_text)

            //创建button标签
            var button = document.createElement('button')
            var button_text = document.createTextNode('✖')
            //给button添加一个点击事件-删除功能
            button.addEventListener('click',function () {
                console.log(this.parentNode)
                var list = document.querySelector('#list')
                list.removeChild(this.parentNode)
            })
            button.appendChild(button_text)

            //把span和button追加到li标签
            li.appendChild(span)
            li.appendChild(button)

            console.log(li)
            console.log(span)
            console.log(button)

            //把li标签追加到ul里面
            var list = document.querySelector('#list')
            list.appendChild(li)
        })

    </script>
</body>
</html>